<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 导入jquery核心类库 -->
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<!-- 导入easyui类库 -->
<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
<script src="../js/easyui/locale/easyui-lang-zh_CN.js"
	type="text/javascript"></script>
<link rel="stylesheet" type="text/css"
	href="../js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="../js/easyui/themes/icon.css">
<script type="text/javascript">

	$(function() {
		$('#grid').datagrid({
			url : 'datagrid_data2.json',
			columns : [ [{
				field : 'id',
				title : 'Id',
				width : 100
			},{
				field : 'name',
				title : 'Name',
				width : 100,
				//设置可编辑组件
				editor:{
					type:"validatebox",//EasyUI的form组件的名字
					options:{//上面组件的属性
						required:true
					}
				}
			},{
				field : 'price',
				title : 'Price',
				width : 100,
				align : 'right',
				//设置可编辑组件
				editor:{
					type:"datebox",//EasyUI的form组件的名字
					options:{//上面组件的属性
						required:true
					}
				}
			}] ],
			toolbar : [ {
				text : '编辑文本',
				handler : function() {
					//所有选定的行
					var row =$("#grid").datagrid("getSelected");
					//根据选中的行返回索引
					var index =$("#grid").datagrid("getRowIndex",row);
					//根据索引打开编辑某行
					$("#grid").datagrid("beginEdit",index);
				}
			}, {
				text : '结束编辑',
				handler : function() {
					//所有选定的行
					var row =$("#grid").datagrid("getSelected");
					//根据选中的行返回索引
					var index =$("#grid").datagrid("getRowIndex",row);
					//根据索引打开编辑某行
					$("#grid").datagrid("endEdit",index);
				}
			}, {
				text : '取消编辑',
				handler : function() {
					//所有选定的行
					var row =$("#grid").datagrid("getSelected");
					//根据选中的行返回索引
					var index =$("#grid").datagrid("getRowIndex",row);
					//根据索引打开编辑某行
					$("#grid").datagrid("cancelEdit",index);
				}
			} ]
		//参数1：行的索引
		//参数2：一行的数据（最终数据：包含改变了的和没改变的）
		//参数3：改变的数据(只包含改变了的)
		,onAfterEdit:function(rowIndex, rowData, changes){
			console.log(rowData);
			console.log(changes);
		}
		
		});

	});
</script>
</head>
<body>
	<table id="grid"></table>
</body>
</html>